﻿@page "/gantt-chart/column-menu"
@using Syncfusion.Blazor.Gantt
@using ej2_blazor_defaultdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the column menu. Click on multiple icon of each column to open the column menu.</p>
</SampleDescription>
<ActionDescription>
    <p>
        Gantt has an option to show the column menu while clicking multiple icon of each column. The column menu has an integrated option to interact with the features such as sorting, filtering, column chooser, and autoFit.
        This feature can be enabled by setting <code>ShowColumnMenu</code> to true.
        The default items are,
        <br>
    </p>
    <ul>
        <li><code>SortAscending</code> - Sorts the current column in ascending order.</li>
        <li><code>SortDescending</code> - Sorts the current column in descending order.</li>
        <li><code>AutoFit</code> - Auto-fit current column.</li>
        <li><code>AutoFitAll</code> - Auto-fit all columns.</li>
        <li><code>ColumnChooser</code> - Chooses the column visibility.</li>
        <li><code>Filter</code> - Filters the current column.</li>
    </ul>
    <p>More information about Column Menu can be found in this <code><a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/gantt-chart/columns/#column-menu'>documentation</a></code> section.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt DataSource="@TaskCollection" Height="450px" Width="100%" AllowResizing="true" ShowColumnMenu="true"
                     HighlightWeekends="true" ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd" TreeColumnIndex="1">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
                                 Duration="Duration" Progress="Progress" ParentID="ParentId" Dependency="Predecessor">
                </GanttTaskFields>
                <GanttColumns>
                    <GanttColumn Field="TaskId" HeaderText="Id"></GanttColumn>
                    <GanttColumn Field="TaskName" HeaderText="TaskName"></GanttColumn>
                    <GanttColumn Field="StartDate" HeaderText="StartDate" MinWidth="130"></GanttColumn>
                    <GanttColumn Field="EndDate" HeaderText="EndDate" MinWidth="130"></GanttColumn>
                    <GanttColumn Field="Duration" HeaderText="Duration" MinWidth="120"></GanttColumn>
                    <GanttColumn Field="Progress" HeaderText="Progress" MinWidth="120"></GanttColumn>
                    <GanttColumn Field="Predecessor" HeaderText="Predecessor" MinWidth="140"></GanttColumn>
                </GanttColumns>
                <GanttLabelSettings LeftLabel="TaskName" TValue="DefaultData.TaskData"></GanttLabelSettings>
                <GanttSplitterSettings Position="50%"></GanttSplitterSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code {
    public DateTime ProjectStart = new DateTime(2019, 3, 24);
    public DateTime ProjectEnd = new DateTime(2019, 7, 6);
    public List<DefaultData.TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        this.TaskCollection = DefaultData.ProjectNewData();
    }
}
